<template>
	<div class="cdRow">
		<div class="cdRowItem">
			<div class="cdPanel">
				<div class="cdTitle">
					<span class="left">开标室</span>
					<span class="unit">（18间）</span>
				</div>
				<div class="cdBody">
					<div class="cdBlock bg1">
						<span class="label">已用</span>
						<span class="val">18</span>
						<span class="unit">间</span>
					</div>
					<div class="cdBlock bg2">
						<span class="label">空闲</span>
						<span class="val">0</span>
						<span class="unit">间</span>
					</div>
				</div>
			</div>
		</div>
		<div class="cdRowItem">
			<div class="cdPanel">
				<div class="cdTitle">
					<span class="left">评标室</span>
					<span class="unit">（31间）</span>
				</div>
				<div class="cdBody">
					<div class="cdBlock bg1">
						<span class="label">已用</span>
						<span class="val">30</span>
						<span class="unit">间</span>
					</div>
					<div class="cdBlock bg2">
						<span class="label">空闲</span>
						<span class="val">1</span>
						<span class="unit">间</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "item",
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {},
	}
</script>

<style lang="scss" scoped>
	.cdRow {
		height: 100%;
		display: flex;

		.cdRowItem {
			height: 100%;
			width: 50%;

			.cdPanel {
				height: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				padding: 30px 14px 22px;


				.cdTitle {
					padding-left: 25px;
					background-image: url('assets/arrow.png');
					background-repeat: no-repeat;
					background-position: left center;
					background-size: auto 100%;
					margin-bottom: 13%;
					display: flex;
					align-items: center;

					.left {
						font-size: 20px;
						font-family: YouSheBiaoTiHei;
						background: linear-gradient(180deg, #00B3FF 0%, #C6F1FF 76.19%);
						-webkit-background-clip: text;
						-moz-background-clip: text;
						background-clip: text;
						color: transparent;
						line-height: 27px;
					}

					.unit{
						color: #C9EFFF;
						font-size: 14px;
						opacity: 0.7;
					}
				}

				.cdBody {
					flex: 1;
					min-height: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.cdBlock {
						background-repeat: no-repeat;
						background-size: auto 100%;
						height: 52px;
						display: flex;
						align-items: center;
						padding-left: 32%;

						.label {
							color: #00F0FF;
							font-size: 18px;
							font-family: YouSheBiaoTiHei;
						}

						.val {
							color: #FFFFFF;
							font-size: 24px;
							font-family: YouSheBiaoTiHei;
							margin: 0 10px 0 28px;
						}

						.unit {
							color: #FFFFFF;
							font-size: 12px;
							margin-top: 4px;
						}

						&.bg1 {
							background-image: url('assets/bg1.png');
						}

						&.bg2 {
							background-image: url('assets/bg2.png');

							.label{
								color: #FF7700;
							}
						}
					}

				}
			}
		}
	}
</style>
